<template>
	<!-- 职业培训——搜索有结果 -->
	<view class="layout">
		<view class="Title">
			<view class="Search">
				<input type="text" placeholder="粤菜" placeholder-style="color:#000;"/>
			</view>
			<image class="fangdajing" src="../../../static/user/u12422.png" mode="aspectFill"></image>
		</view>
		<view class="Content">
			<view class="row">
				<image class="rowImage" src="../../../static/user/u12450.png" mode="widthFix"></image>
				<view class="item">
					<view class="itemTopBao">
						<view class="itemTopBaoLeft">
							<text class="itemTopBaoLeftTitle">粤菜师傅</text>
							<text class="itemTopBaoLeftContent">广东省崇左职业培训</text>
						</view>
						<view class="itemTopBaoRight">
							<text class="gratis">免费</text>
							<text class="Price">原价￥8200</text>
						</view>
					</view>
					<view class="ContentCenterLeft">
						<view class="ContentCenterLeftButtom">
							<view class="ContentCenterLeftButtomCondition">
								政府合作
							</view>
							<view class="ContentCenterLeftButtomCondition">
								学会为止
							</view>
							<view class="ContentCenterLeftButtomCondition">
								实操教学
							</view>
						</view>
					</view>
					<view class="itemButtom">
						<view class="itemButtomLeft">
							<text class="EventRegistration">活动报名中</text>
						</view>
						<view class="itemButtomRight">
							<text class="Application">报名数：</text>
							<text class="quantity">5682</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	    .layout{
	    	padding: 20rpx 25rpx;
	    	.Title{
	    		display: flex;
	    		align-items: center;
	    		justify-content: space-between;
	    		height: 80rpx;
	    		
	    		.Search{
	    			height: 60rpx;
	    			width: 550rpx;
	    			border-radius: 30rpx;
	    			padding: 0 30rpx;
	    			display: flex;
	    			align-items: center;
	    			background-color: #F2F2F2;
	    		}
	    		.fangdajing{
	    			width: 50rpx;
	    			height: 50rpx;
	    		}
	    	}
	    	.Content{
	    		margin: 20rpx 0;
	    		.row{
	    			border: 1px solid #ccc;
	    			border-radius: 0 0 15rpx 15rpx;
	    			box-shadow: -5rpx 5rpx 15rpx 8rpx rgba(40,40,40,0.1);
	    			margin: 50rpx 0;
	    			display: flex;
	    			justify-content: space-between;
	    			align-content: center;
	    			padding: 20rpx 15rpx 20rpx 20rpx;
	    			height: 22vh;
	    			.rowImage{
	    				width: 34%;
	    			}
	    			.item{
	    				width: 64%;
	    				.itemTopBao{
	    					margin-top: 5rpx;
	    					display:flex;
	    					justify-content: space-between;
	    					align-content: flex-start;
	    					height: 90rpx;
	    					margin-bottom: 20rpx;
	    					.itemTopBaoLeft{
	    						display: flex;
	    						justify-content: space-between;
	    						flex-direction: column;
	    						.itemTopBaoLeftTitle{
	    							font-size: 32rpx;
	    							font-weight: bold;
	    						}
	    						.itemTopBaoLeftContent{
	    							font-size: 28rpx;
	    						}
	    					}
	    					.itemTopBaoRight{
	    						display: flex;
	    						text-align: right;
	    						flex-direction: column;
	    						.gratis{
	    							font-size: 28rpx;
	    							color: #E7624B;
	    						}
	    						.Price{
	    							font-size: 28rpx;
	    							color: #888;
	    						}
	    					}
	    					
	    				}
	    				.ContentCenterLeft{
	    					margin: 20rpx 0;
	    					.ContentCenterLeftButtom{
	    						display: flex;
	    						align-items: center;
	    						margin: 8rpx 0;
	    						.ContentCenterLeftButtomCondition{
	    							border-radius: 8rpx;
	    							display: flex;
	    							justify-content: center;
	    							align-items: center;
	    							color: #90979F;
	    							font-size: 25rpx;
	    							background-color: #EEEFF8;
	    							padding: 5rpx 10rpx;
	    							margin-right: 10rpx;
	    						}
	    					}
	    				}
	    
	    				.itemButtom{
	    					margin: 30rpx 0;
	    					display: flex;
	    					align-items: center;
	    					justify-content: space-between;
	    					font-size: 28rpx;
	    					.itemButtomLeft{
	    						.EventRegistration{
	    							color: #2F78FF;
	    						}
	    					}
	    					.itemButtomRight{
	    						.Application{
	    							color: #777;
	    						}
	    						.quantity{
	    							color: #2F78FF;
	    							
	    						}
	    					}
	    				}
	    			}
	    		}
	    	}
	    } 
</style>
